<template>
  <div class="product">
    <div v-if="!isAddShow" class="product_list">
    <div class="filter-container">
      <el-input v-model="listQuery.title"
                placeholder="商品标题" style="width: 100px;"
                class="filter-item"
                @keyup.enter.native="handleFilter"/>
      <el-select v-model="listQuery.importance"
                 placeholder="商品类型"
                 clearable style="width: 120px"
                 class="filter-item">
        <el-option v-for="item in importanceOptions"
                   :key="item"
                   :label="item"
                   :value="item"/>
      </el-select>
      <el-select v-model="listQuery.type"
                 placeholder="商品源地"
                 clearable class="filter-item"
                 style="width: 130px">
        <el-option v-for="item in calendarTypeOptions"
                   :key="item.key"
                   :label="item.display_name+'('+item.key+')'"
                   :value="item.key"/>
      </el-select>
      <el-select v-model="listQuery.sort"
                 style="width: 140px"
                 class="filter-item"
                 @change="handleFilter">
        <el-option v-for="item in sortOptions"
                   :key="item.key"
                   :label="item.label"
                   :value="item.key"/>
      </el-select>
      <el-button v-waves
                 class="filter-item"
                 type="primary"
                 icon="el-icon-search"
      >
        搜索
      </el-button>
      <el-button class="filter-item"
                 style="margin-left: 10px;"
                 type="primary"
                 icon="el-icon-edit"
                 @click="handleCreate">
        新增商品
      </el-button>
      <el-button v-waves
                 :loading="downloadLoading"
                 class="filter-item"
                 type="primary"
                 icon="el-icon-download"
                 @click="handleDownload">
        导出
      </el-button>

      <el-button v-waves
                 :loading="downloadLoading"
                 class="filter-item"
                 type="primary"
                 icon="el-icon-upload2"
                 @click="handleDownload">
        导入
      </el-button>
    </div>



    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80"
                       :class-name="getSortClass('id')">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="商品标题"
                       prop="title"
                       sortable="custom"
                       align="center"
                       width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column label="商品图片"
                       prop="pic"
                       sortable="custom"
                       align="center"
                       width="120">
        <template slot-scope="scope">
          <img width="80" :src="scope.row.pic">
        </template>
      </el-table-column>

      <el-table-column label="商品价格"
                       prop="price"
                       sortable="custom"
                       align="center"
                       width="150">
        <template slot-scope="scope">
          <span>￥{{ scope.row.price.toFixed(2)}}</span>
        </template>
      </el-table-column>

      <el-table-column label="商品库存"
                       prop="stock"
                       sortable="custom"
                       align="center"
                       width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.stock}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="330" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button v-if="row.status!='published'" size="mini" type="success"
                     @click="handleModifyStatus(row,'published')">
            发布
          </el-button>
          <el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
            下架
          </el-button>
          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(row,'deleted')">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0"
                :total="total"
                :page.sync="listQuery.page"
                :limit.sync="listQuery.limit"
                @pagination="getList"/>
    </div>

    <div v-else class="add_product">
      <vue-ueditor-wrap
        :config="myConfig">

      </vue-ueditor-wrap>
    </div>
  </div>
</template>

<script>
  import waves from '@/directive/waves'
  import ajax from '@/utils/baseurl'
  import Pagination from '@/components/Pagination'
  import VueUeditorWrap from 'vue-ueditor-wrap'

  var p
  export default {
    name: 'commodityManagement',
    directives: { waves },
    components: { Pagination, VueUeditorWrap},
    data() {
      return {
        myConfig:{
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 初始容器高度
          initialFrameHeight: 240,
          // 初始容量宽度
          initialFrameWidth: '100%',
          // 上传文件接口（这个地址我为了方便各位体验文件上传）
          serverUrl: 'http://localhost:8080/upload',
          UEDITOR_HOME_URL:'/UEditor/'
        },
        isAddShow:false,
        temp: {
          title: '',
          pic:'',
          price:0.00
        },
        total: 0,
        tableKey: 0,
        list: null,
        listLoading: false,
        downloadLoading: false,
        listQuery: {
          page: 1,
          limit: 10,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        importanceOptions: ['特价', '售罄', '正常'],
        calendarTypeOptions: [
          { key: 'CN', display_name: '中国大陆' },
          { key: 'US', display_name: '美国' },
          { key: 'JP', display_name: '日本' },
          { key: 'EU', display_name: '欧洲' }
        ],
        sortOptions: [{ label: 'ID升序', key: '+id' }, { label: 'ID降序', key: '-id' }]

      }
    },
    created() {
      p = this
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        ajax('product/all2', this.listQuery, function(res) {
          p.list = res.content
          //page limit赋值
          p.total = res.totalElements
          p.listLoading = false
        })
      },
      sortChange(data) {

      },
      handleFilter() {

      },
      handleCreate() {
        this.isAddShow=true;
      },
      handleDownload() {

      },
      getSortClass: function(key) {

      }

    }
  }
</script>
